<style type="text/less">
    #recommend.course{
        width: 100%;
        height:300px;
        .one-rec{
            width: 100%;
            height: 100%;
            /* display: none; */
            a{
                position: relative;
                width: 100%;
                height: 100%;
                display: block;
                img{
                    width: 100%;
                    height: 100%;
                }
                .title{
                    width: 100%;
                    position: absolute;
                    color: #ffffff;
                    left: 0;
                    bottom: 0px;
                    font-size: 14px;
                    line-height: 18px;
                    padding: 0 10px;
                    height: 44px;
                    background-image: linear-gradient(0deg,
                    #000000 40%,
                    rgba(0, 0, 0, 0.64) 72%,
                    rgba(63, 62, 63, 0.5) 85%,
                    rgba(70, 68, 70, 0.46) 86%,
                    #8b878b 100%);
                    display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
                    display: -moz-box; /* Firefox 17- */
                    display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
                    display: -moz-flex; /* Firefox 18+ */
                    display: -ms-flexbox; /* IE 10 */
                    display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
                    align-items: center;
                }
            }
        }
        .two-rec{
            width: 100%;
            height: 100%;
            /*display: none;*/
            a{
                position: relative;
                display: inline-block;
                width: 100%;
                height: 48%;
                img{
                    width: 100%;
                    height: 100%;
                }
                .title{
                    width: 100%;
                    position: absolute;
                    color: #ffffff;
                    left: 0;
                    bottom: 0;
                    font-size: 14px;
                    line-height: 18px;
                    padding: 0 10px;
                    height: 44px;
                    background-image: linear-gradient(0deg,
                    #000000 40%,
                    rgba(0, 0, 0, 0.64) 72%,
                    rgba(63, 62, 63, 0.5) 85%,
                    rgba(70, 68, 70, 0.46) 86%,
                    #8b878b 100%);
                    display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
                    display: -moz-box; /* Firefox 17- */
                    display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
                    display: -moz-flex; /* Firefox 18+ */
                    display: -ms-flexbox; /* IE 10 */
                    display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
                    align-items: center;
                }
            }
            a:nth-child(2n){
                margin-top: 3%;
            }
        }
        .four-rec{
            /*display: none;*/
            width: 100%;
            height: 100%;
            a{
                position: relative;
                display: inline-block;
                width: 48%;
                height: 48.5%;
                img{
                    width: 100%;
                    height: 100%;
                }
                .title{
                    width: 100%;
                    position: absolute;
                    color: #ffffff;
                    left: 0;
                    bottom: 0;
                    font-size: 14px;
                    line-height: 18px;
                    padding: 0 10px;
                    height: 44px;
                    background-image: linear-gradient(0deg,
                    #000000 40%,
                    rgba(0, 0, 0, 0.64) 72%,
                    rgba(63, 62, 63, 0.5) 85%,
                    rgba(70, 68, 70, 0.46) 86%,
                    #8b878b 100%);
                    display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
                    display: -moz-box; /* Firefox 17- */
                    display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
                    display: -moz-flex; /* Firefox 18+ */
                    display: -ms-flexbox; /* IE 10 */
                    display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
                    align-items: center;
                }
            }
            a:nth-child(2n){
                margin-left: 2%;
            }
            a:nth-child(3){
                margin-top:2%;
            }
        }
        .three-rec{
            /*display: none;*/
            width: 100%;
            height: 100%;
            a{
                position: relative;
                display: inline-block;
                width: 48%;
                height: 49.6%;
                img{
                    width: 100%;
                    height: 100%;
                }
                .title{
                    width: 100%;
                    position: absolute;
                    color: #ffffff;
                    left: 0;
                    bottom: 0;
                    font-size: 14px;
                    line-height: 18px;
                    padding: 0 10px;
                    height: 44px;
                    background-image: linear-gradient(0deg,
                    #000000 40%,
                    rgba(0, 0, 0, 0.64) 72%,
                    rgba(63, 62, 63, 0.5) 85%,
                    rgba(70, 68, 70, 0.46) 86%,
                    #8b878b 100%);
                    display: -webkit-box; /* Chrome 4+, Safari 3.1, iOS Safari 3.2+ */
                    display: -moz-box; /* Firefox 17- */
                    display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
                    display: -moz-flex; /* Firefox 18+ */
                    display: -ms-flexbox; /* IE 10 */
                    display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
                    align-items: center;
                }
            }
            .top{
                width: 100%;
                height: 48%;
                margin-bottom: 2%;
            }
            a:nth-child(2){
                margin-right: 2.5%;
            }
        }
    }
</style>
<script src="/web/lib/less.min.js"></script>
<#if channel.channelStatus == 1>
    <div id="recommend" class="course">
        <!-- 一个推荐位 -->
        <#if list?size == 1>
            <div class="one-rec">
                <#list list as info>
                    <#if info.articleOutLinkStatus == 1>
                        <a href="${info.articleOutLink}" target="_blank" title="${info.articleTitle}">
                            <img src="${info.articleTitleImage}" alt="${info.articleTitleImageAlt}" title="${info.articleTitleImageAlt}">
                            <div class="title">${info.articleTitle}</div>
                        </a>
                    <#else>
                        <a href="${info.articleUrl}" target="_blank" ${info.articleTitle}>
                            <img src="${info.articleTitleImage}" alt="${info.articleTitleImageAlt}" title="${info.articleTitleImageAlt}">
                            <div class="title">${info.articleTitle}</div>
                        </a>
                    </#if>
                </#list>
            </div>
        </#if>
        <!-- 两个推荐位 -->
        <#if list?size == 2>
            <div class="two-rec">
                <#list list as info>
                    <#if info.articleOutLinkStatus == 1>
                        <a href="${info.articleOutLink}" target="_blank" title="${info.articleTitle}">
                            <img src="${info.articleTitleImage}" alt="${info.articleTitleImageAlt}" title="${info.articleTitleImageAlt}">
                            <div class="title">${info.articleTitle}</div>
                        </a>
                    <#else>
                        <a href="${info.articleUrl}" target="_blank" title="${info.articleTitle}">
                            <img src="${info.articleTitleImage}" alt="${info.articleTitleImageAlt}" title="${info.articleTitleImageAlt}">
                            <div class="title">${info.articleTitle}</div>
                        </a>
                    </#if>
                </#list>
            </div>
        </#if>
        <!--三个推荐位-->
        <#if list?size == 3>
            <div class="three-rec">
                <#list list as info>
                    <#if info_index == 0>
                        <#if info.articleOutLinkStatus == 1>
                            <a href="${info.articleOutLink}" target="_blank" class="top" title="${info.articleTitle}">
                                <img src="${info.articleTitleImage}" alt="${info.articleTitleImageAlt}" title="${info.articleTitleImageAlt}">
                                <div class="title">${info.articleTitle}</div>
                            </a>
                        <#else>
                            <a href="${info.articleUrl}" target="_blank" class="top" title="${info.articleTitle}">
                                <img src="${info.articleTitleImage}" alt="${info.articleTitleImageAlt}" title="${info.articleTitleImageAlt}">
                                <div class="title">${info.articleTitle}</div>
                            </a>
                        </#if>
                    <#else>
                        <#if info.articleOutLinkStatus == 1>
                            <a href="${info.articleOutLink}" target="_blank" title="${info.articleTitle}">
                                <img src="${info.articleTitleImage}" alt="${info.articleTitleImageAlt}" title="${info.articleTitleImageAlt}">
                                <div class="title">${info.articleTitle}</div>
                            </a>
                        <#else>
                            <a href="${info.articleUrl}" target="_blank" title="${info.articleTitle}">
                                <img src="${info.articleTitleImage}" alt="${info.articleTitleImageAlt}" title="${info.articleTitleImageAlt}">
                                <div class="title">${info.articleTitle}</div>
                            </a>
                        </#if>
                    </#if>
                </#list>
            </div>
        </#if>
        <!-- 四个推荐位 -->
        <#if list?size gt 3>
            <div class="four-rec">
                <#list list as info>
                    <#if info.articleOutLinkStatus == 1>
                        <a href="${info.articleOutLink}" target="_blank" title="${info.articleTitle}">
                            <img src="${info.articleTitleImage}" alt="${info.articleTitleImageAlt}" title="${info.articleTitleImageAlt}">
                            <div class="title">${info.articleTitle}</div>
                        </a>
                    <#else>
                        <a href="${info.articleUrl}" target="_blank" title="${info.articleTitle}">
                            <img src="${info.articleTitleImage}" alt="${info.articleTitleImageAlt}" title="${info.articleTitleImageAlt}">
                            <div class="title">${info.articleTitle}</div>
                        </a>
                    </#if>
                </#list>
            </div>
        </#if>
    </div>
</#if>